<template>
  <div class="address">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      送达地址
      <mu-button icon slot="right" @click="openFullScreenDialog">
        <mu-icon value="add"></mu-icon>
      </mu-button>
    </mu-appbar>
    <mu-list textline="three-line" class="load-more-wrap">
      <mu-paper round style="margin-bottom: 1rem" v-for="item in list" v-bind:key="item.id" :z-depth="0">
        <mu-list-item style="padding-top: 1rem;" :key="item.id">
          <mu-list-item-action>
            <mu-avatar color="primary">
              <mu-icon value="place"></mu-icon>
            </mu-avatar>
          </mu-list-item-action>
          <mu-list-item-content>
            <mu-list-item-title>{{item.realname}} {{item.telphone ?
              item.telphone.replace(item.telphone.substr(3,4),"****"): ""}}
            </mu-list-item-title>
            <mu-list-item-sub-title>
              <span>{{item.province}}</span> <span>{{item.city}}</span> <span>{{item.street}}</span>
            </mu-list-item-sub-title>
            <mu-list-item-sub-title>
              {{item.bankUname}}
            </mu-list-item-sub-title>
            <mu-list-item-sub-title>
              <div style="font-size: 12px;height: 3rem">
                <!--<span>{{item.isDefaultAddress === 1 ? '默认地址': ''}}</span>-->
                <mu-button style="float: right;width: 3rem;height: 2rem" icon slot="right" @click="remove(item.id)">
                  <mu-icon color="red" size="20" value="remove_circle"></mu-icon>
                </mu-button>
                <mu-button style="float: right;width: 2rem;height: 2rem;" icon slot="right"
                           @click="openEditFullScreenDialog(item.id)">
                  <mu-icon style="float: right" size="20" color="primary" value="edit"></mu-icon>
                </mu-button>
              </div>
            </mu-list-item-sub-title>
          </mu-list-item-content>
        </mu-list-item>
      </mu-paper>
    </mu-list>
    <mu-dialog width="100%" style="height: 100%;" scrollable transition="slide-right" fullscreen
               :open.sync="openFullScreen">
      <mu-appbar :z-depth="0" style="top: 0" color="primary" :title="dialogTitle">
        <mu-button slot="left" icon @click="closeFullScreenDialog">
          <mu-icon value="close"></mu-icon>
        </mu-button>
        <mu-button slot="right" flat @click="sureFullScreenDialog">
          保存
        </mu-button>
      </mu-appbar>
      <div style="padding: 24px;">
        <mu-container>
          <mu-form ref="form" label-position="left" :model="validateForm">
            <mu-form-item label="默认地址：" prop="username">
              <mu-switch v-model="validateForm.isDefault"></mu-switch>
            </mu-form-item>
            <mu-form-item label="收件人姓名：" prop="realname" :rules="realnameRules">
              <mu-text-field v-model="validateForm.realname" prop="realname"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="联系电话：" prop="telphone" :rules="telphoneRules">
              <mu-text-field v-model="validateForm.telphone" prop="telphone"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="备用电话：" prop="telphone2">
              <mu-text-field v-model="validateForm.telphone2" prop="telphone2"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="邮政编码：" prop="zip">
              <mu-text-field v-model="validateForm.zip" prop="zip"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="详细地址：" prop="street">
              <mu-text-field v-model="validateForm.street" prop="street"></mu-text-field>
            </mu-form-item>
            <mu-form-item style="width: 100%" label="请选择省市：">
              <mu-slide-picker :slots="addressSlots" :visible-item-count="5" @change="addressChange"
                               :values="address"></mu-slide-picker>
            </mu-form-item>
          </mu-form>
        </mu-container>
      </div>
    </mu-dialog>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  const address = {
    '北京': ['北京'],
    '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
    '上海': ['上海'],
    '天津': ['天津'],
    '重庆': ['重庆'],
    '辽宁': ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'],
    '江苏': ['南京', '苏州', '无锡', '常州', '镇江', '南通', '泰州', '扬州', '盐城', '连云港', '徐州', '淮安', '宿迁'],
    '湖北': ['武汉', '黄石', '十堰', '荆州', '宜昌', '襄樊', '鄂州', '荆门', '孝感', '黄冈', '咸宁', '随州', '恩施土家族苗族自治州', '仙桃', '天门', '潜江', '神农架林区'],
    '四川': ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'],
    '陕西': ['西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛'],
    '河北': ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水'],
    '山西': ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁'],
    '河南': ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店'],
    '吉林': ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边朝鲜族自治州'],
    '黑龙江': ['哈尔滨', '齐齐哈尔', '鹤岗', '双鸭山', '鸡西', '大庆', '伊春', '牡丹江', '佳木斯', '七台河', '黑河', '绥化', '大兴安岭地区'],
    '内蒙古': ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '锡林郭勒盟', '兴安盟', '阿拉善盟'],
    '山东': ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'],
    '安徽': ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '巢湖', '六安', '亳州', '池州', '宣城'],
    '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
    '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
    '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州'],
    '广西': ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'],
    '江西': ['南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶'],
    '贵州': ['贵阳', '六盘水', '遵义', '安顺', '铜仁地区', '毕节地区', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'],
    '云南': ['昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州', '大理白族自治州', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州'],
    '西藏': ['拉萨', '那曲地区', '昌都地区', '林芝地区', '山南地区', '日喀则地区', '阿里地区'],
    '海南': ['海口', '三亚', '五指山', '琼海', '儋州', '文昌', '万宁', '东方', '澄迈县', '定安县', '屯昌县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'],
    '甘肃': ['兰州', '嘉峪关', '金昌', '白银', '天水', '武威', '酒泉', '张掖', '庆阳', '平凉', '定西', '陇南', '临夏回族自治州', '甘南藏族自治州'],
    '宁夏': ['银川', '石嘴山', '吴忠', '固原', '中卫'],
    '青海': ['西宁', '海东地区', '海北藏族自治州', '海南藏族自治州', '黄南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
    '新疆': ['乌鲁木齐', '克拉玛依', '吐鲁番地区', '哈密地区', '和田地区', '阿克苏地区', '喀什地区', '克孜勒苏柯尔克孜自治州', '巴音郭楞蒙古自治州', '昌吉回族自治州', '博尔塔拉蒙古自治州', '石河子', '阿拉尔', '图木舒克', '五家渠', '伊犁哈萨克自治州'],
    '香港': ['香港'],
    '澳门': ['澳门'],
    '台湾': ['台北市', '高雄市', '台北县', '桃园县', '新竹县', '苗栗县', '台中县', '彰化县', '南投县', '云林县', '嘉义县', '台南县', '高雄县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '基隆市', '新竹市', '台中市', '嘉义市', '台南市']
  };
  export default {
    name: 'addressInfo',
    data() {
      return {
        dialogTitle: '',
        realnameRules: [
          {validate: (val) => !!val, message: '必须填写收件人姓名'}
        ],
        messages: false,
        list: [],
        openFullScreen: false,
        telphoneRules: [
          {validate: (val) => !!val, message: '必须填写联系电话'}
        ],
        bankAccountRules: [
          {validate: (val) => !!val, message: '必须填写银行账号'}
        ],
        bankUnameRules: [
          {validate: (val) => !!val, message: '必须填写收款银行户名'}
        ],
        validateForm: {
          id: '',
          realname: '',
          telphone: '',
          telphone2: '',
          zip: '',
          province: '',
          city: '',
          street: '',
          isDefault: false
        },
        addressSlots: [
          {
            width: '100%',
            textAlign: 'right',
            values: Object.keys(address)
          }, {
            width: '100%',
            textAlign: 'left',
            values: ['北京']
          }
        ],
        address: ['北京', '北京'],
        addressProvince: '北京',
        addressCity: '北京'
      }
    },
    components: {
      headerBack
    },
    methods: {
      openEditFullScreenDialog(id) {
        this.dialogTitle = "修改送达地址";
        this.postRequest("/user/address/" + id).then(res => {
          if (res.code === 200) {
            this.validateForm = {
              id: id,
              realname: res.data.realname,
              telphone: res.data.telphone,
              telphone2: res.data.telphone2,
              zip: res.data.zip,
              street: res.data.street,
              isDefault: res.data.isDefaultAddress === 1
            };
            this.addressProvince = res.data.province;
            this.addressCity = res.data.city;
            this.address = [res.data.province, res.data.city];
            this.openFullScreen = true;
          }
        });
      },
      openFullScreenDialog() {
        this.dialogTitle = "添加送达地址";
        this.validateForm = {
          id: '',
          realname: '',
          telphone: '',
          telphone2: '',
          zip: '',
          province: '',
          city: '',
          street: '',
          isDefault: false
        };
        this.openFullScreen = true;
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      sureFullScreenDialog() {
        this.$refs.form.validate().then((result) => {
          if (result) {
            this.validateForm.province = this.addressProvince;
            this.validateForm.city = this.addressCity;
            this.postRequest("/user/uploadAddress", this.validateForm).then(res => {
              if (res.code === 200) {
                this.$toast.success("操作成功！");
                this.listData();
                this.openFullScreen = false;
              }
            });
          }
        });
      },
      listData() {
        const _self = this;
        this.postRequest("/user/addressList").then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.list = res.data;
            }
          }
        });
      },
      remove(id) {
        this.$confirm('确定要删除？', '提示', {
          type: 'warning'
        }).then(({result}) => {
          if (result) {
            let param = {
              id: id
            };
            this.postRequest("/user/removeAddress", param).then(res => {
              if (res.code === 200) {
                this.$toast.success("删除成功");
                this.listData();
              }
            });
          }
        });
      },
      addressChange(value, index) {
        switch (index) {
          case 0:
            this.addressProvince = value
            const arr = address[value]
            this.addressSlots[1].values = arr
            this.addressCity = arr[0]
            break
          case 1:
            this.addressCity = value
            break
        }
        this.address = [this.addressProvince, this.addressCity]
      }
    },
    mounted: function () {
      this.listData();
    }
  }
</script>

<style scoped lang="less">

  .address {
    position: fixed;
    top: 0;
    width: 100%;
    /*overflow: auto;*/
    height: 100%;
    z-index: 999;
    background-color: #f9f9f9;
  }

  .load-more-wrap {
    width: 100%;
    height: 90%;
    overflow: scroll;
    padding: 10px;
  }

</style>
